<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        position属性
    </title>
</head>
<body style="height: 1200px">
<style>
    #divall{
        width: 960px;
        height: 500px;
        border: 1px solid;
        margin: 0px auto;
        position: relative;
    }
    #div1{
        width: 200px;
        height: 200px;
        background: red;
        /*默认static 没有定位*/
        /*relative 相对定位
        relative 配合 top left rihgt bottom
        相对于元素的原理位置进行 偏移
        原来的位置保留
        层级提高
        */
        /*absolute  绝对定位
            绝对定位 相对应浏览器进行的偏移
            如果父级有定位属性，相对应父级元素进行偏移
            原来位置不保留，脱离标准文档刘
            层级提高
        */
        position: absolute;
        top: 50px;
        left: 50px;

    }
    #div2{
        width: 200px;
        height: 200px;
        background: blue;
        /*fixed 固定定位，
            相对应浏览器的一个固定位置
        */
        position: fixed;
        top: 100px;
        right: 0px;
    }
</style>
<div id="divall">
    <div id="div1">

    </div>
</div>
<div id="div2">

</div>
</body>
</html>